<script lang="ts" setup>
import type { Picture } from '@/types/consult';
import type { ConsultRecord } from '@/types/room';
import { consultFlags, illnessTimes } from '@/utils/constant';

defineProps<{
  consultRecord: ConsultRecord
}>()

// 1. 预览图片
const onPreview = (pics: Picture[])=>{
  if(pics.length === 0) return uni.showToast({title: '没有可预览的图片', icon: 'none'})
  uni.previewImage({
    urls: pics.map(item => item.url),
  })
}
</script>
<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        {{ consultRecord.patientInfo?.name }}
        {{ consultRecord.patientInfo?.genderValue }}
        {{ consultRecord.patientInfo?.age }}岁
      </view>
      <!-- <view class="note">一周内 | 未去医院就诊</view> -->
      <view class="note">{{illnessTimes.find(item => item.type === consultRecord.illnessTime)?.value }} | {{consultFlags.find(item => item.type === consultRecord.consultFlag)?.value }}</view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{ consultRecord.illnessDesc }}</text>
      </view>
      <view class="list-item">
        <text class="label">图片</text>
        <text class="note" @click="onPreview(consultRecord.pictures)">点击查看</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.patient-info {
  padding: 30rpx;
  margin-top: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #fff;

  .header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;

    .title {
      font-size: 32rpx;
      color: #121826;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: 26rpx;
      color: #848484;
    }
  }

  .content {
    margin-top: 20rpx;
    font-size: 26rpx;

    .list-item {
      display: flex;
      margin-top: 10rpx;
    }

    .label {
      width: 130rpx;
      color: #3c3e42;
    }

    .note {
      flex: 1;
      line-height: 1.4;
      color: #848484;
    }
  }
}
</style>